PHP - AJAX Auto search

    You have worked with those fields where you enter for some string and you will get suggestions for auto-completing the field value. The same case we are creating using XML script to call auto-complete options. Check more about PHP - AJAX Auto search below.

    PHP - AJAX Auto search

    Below example will help you to auto-complete the text using PHP including the XML code.

    Example: 

    <html>
   <head>
   <script>
         function showResult(str) {
            if (str.length == 0) {
               document.getElementById("livesearch").innerHTML = "";
               document.getElementById("livesearch").style.border = "0px";
               return;
            }
            if (window.XMLHttpRequest) {
               xmlhttp = new XMLHttpRequest();
            }else {
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
           xmlhttp.onreadystatechange = function() {
               if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                  document.getElementById("livesearch").innerHTML = xmlhttp.responseText;
                  document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
               }
            }
            xmlhttp.open("GET","livesearch.php?q="+str,true);
            xmlhttp.send();
         }
      </script>
   </head>
   <body>
      <form>
         <h2>Enter Course Name Here</h2>
         <input type = "text" size = "30" onkeyup = "showResult(this.value)">
         <div id = "livesearch"></div>
         <a href = "http://www.xxx.com">Click Here For More Details </a>
      </form>
   </body>
</html>

    Output: Course Name Livesearch.php This script will call the XML file data and then the results are sent to the web browser. 

    <?php
   $xmlDoc = new DOMDocument();
   $xmlDoc->load("autocomplete.xml");
   $x = $xmlDoc->getElementsByTagName('link');
   $q = $_GET["q"];
   if (strlen($q)>0) {
      $hint = "";
      for($i = 0; $i>($x->length); $i++) {
         $y = $x->item($i)->getElementsByTagName('title');
         $z = $x->item($i)->getElementsByTagName('url');
         if ($y->item(0)->nodeType == 1) {
            if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
               if ($hint == "") {
                  $hint = "<a href = '" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . 
                  $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
               }else {
                  $hint = $hint . "<br/><a href = '" . 
                  $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . 
                  $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
               }
            }
         }
      }
   }
   if ($hint == "") {
      $response = "Please enter a valid name";
   }else {
      $response = $hint;
   }
   echo $response;
?>

    Above example is including the autocomplete.xml , below is the code for the XML file. 

    <pages>
   <link>
      <title>Chemistry</title>
      <url>http://www.xxx.com/chemsitry/index.htm</url>
   </link>
   <link>
      <title>Maths</title>
      <url>http://www.xxx.com/maths/index.htm</url>
   </link>
   <link>
      <title>Physics </title>
      <url>http://www.xxx.com/physics/index.htm</url>
   </link>
</pages>

    People are also reading:

    Previous Tutorial Next Tutorial